HTML表單標籤是互動設計中不可或缺的一部分，透過收集用戶輸入的數據、執行搜索、註冊、訂閱等來實現各種互動功能。我們了解一些常見的HTML表單標籤以及如何使用它們吧!

表單標籤 <form>

用於建立整個表單，包含了所有表單元素，也是我們用來收集用戶輸入的部分，以下來看看表單裡有什麼元素吧!

輸入元素標籤 <input>

最常見的表單元素之一，用於接受用戶輸入的各種類型數據。
可包括文本、密碼、數字等。運用 type 屬性可以指定用戶輸入的類型。

範例：建立一個用戶名的文本輸入字段。

<form>
  <label for="username">用戶名：</label>
  <input type="text" id="username" name="username">
</form>

按鈕標籤 <button>

建立一個按鈕，用於提交表單或執行其他函數用的。

範例：建立一個提交按鈕和一個重置按鈕。

<form>
  <button type="submit">提交</button>
  <button type="reset">重置</button>
</form>

選擇框標籤 <select> 和選項標籤 <option>

<select>標籤用於創建下拉菜單，讓用戶選擇其中一個選項。
<option>標籤用於定義下拉菜單中的選項。

範例：創建了一個選擇國家的下拉菜單，用戶可以從多個選項中選擇。

<form>
  <label for="country">選擇國家：</label>
  <select id="country" name="country">
    <option value="usa">美國</option>
    <option value="canada">加拿大</option>
    <option value="uk">英國</option>
  </select>
</form>

文本區域標籤 <textarea>

用於接受多行文本輸入，比較會用在需要輸入較多文字的地方像是評論或消息之類的。

範例：創建一個文本區域，可以輸入多行文本。

<form>
  <label for="comments">請留下您的評論：</label>
  <textarea id="comments" name="comments" rows="4" cols="50"></textarea>
</form>

我們可以透過上述的介紹來設計一個簡易留言板:

先介紹到這邊，感謝觀看!